<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #f5f5f5;
            height: 500px;
        }

        .video {
            width: 300px;
            height: 300px;
            background-color: blanchedalmond;
            border: 1px solid firebrick;
            margin-left: 20px;
        }
    </style>
</head>

<body>
    <canvas width="300" height="300"></canvas>
    <div class="video">
        <video src="" width="300" height="300" controls autoplay id="video"></video>
    </div>
    
    <script>
        const canvas = document.querySelector('canvas')
        const ctx = canvas.getContext('2d')
        const {width, height} = canvas
        ctx.fillStyle = 'red'

        function draw(rotate = 0) {
            ctx.clearRect(0, 0, 2*width, 2*height)
            ctx.save()
            ctx.translate(width/2, height/2)
            ctx.rotate(rotate)
            ctx.translate(-width/2, -height/2)
            ctx.beginPath()
            ctx.rect(50, 50, 200, 200)
            ctx.fill()
            ctx.restore()
        }

        function update(t) {
            draw(t/500)
            requestAnimationFrame(update)
        }

        update(0)


        const stream = canvas.captureStream()
        const recorder = new MediaRecorder(stream, { mimeType: 'video/webm' })
        const data = []
        recorder.ondataavailable = function(e) {
            if (e.data && e.data.size) {
                data.push(e.data)
            }
        }
        recorder.onstop = function() {
            const url = URL.createObjectURL(new Blob(data, { type: 'video/webm' }))
            console.log(url)
            document.querySelector('video').src = url
        }
        recorder.start()
        setTimeout(() => {
            recorder.stop()
        }, 5000);
    </script>
</body>

</html>